<script setup>
// import { copyPlotFile } from "@/api/drawing.js";
// import { getPlotFileGroup } from "@/api/drawing_list.js";
import { drawingListAxios } from "@/data/index.js";

const props = defineProps({
  plotID: {
    type: String,
    required: true,
  },
  visible: Boolean,
});

const show = ref(false);
const copyName = ref("");
const copyGroup = ref({});
const drawingList = ref([]);

const getPlotGroup = () => {
  drawingList.value = drawingListAxios;
};

getPlotGroup();

// 取消保存
const cancelSave = () => {
  copyGroup.value = {};
  copyName.value = "";
  //   this.$emit('update:visible', false)
};

// 切换分组
const changeGroup = (val) => {
  copyGroup.value = val;
};

// 确认保存
const confirmSave = () => {
  if (!copyName.value && Object.keys(copyGroup.value).length)
    return ElMessage.error("请补全信息!");
  const params = {
    plot_id: props.plotID,
    group_id: copyGroup.value.GROUP_ID,
    group_name: copyGroup.value.GROUP_NAME,
    plot_name: copyName.value,
  };
};

watch(
  () => props.visible,
  (nv) => {
    show.value = nv;
  }
);
</script>
<template>
  <el-dialog
    class="copy-dialog"
    width="30%"
    v-model="show"
    :show-close="false"
    title="制图另存为"
  >
    <span style="marginright: 40px; fontsize: 18px">制图名称</span>
    <el-input style="width: 50%" v-model="copyName"></el-input>
    <div style="margintop: 20px">
      <span style="marginright: 40px; fontsize: 18px">选择分组</span>
      <el-select
        v-model="copyGroup"
        value-key="GROUP_ID"
        style="width: 50%"
        filterable
        @change="changeGroup"
      >
        <el-option
          v-for="item in drawingList"
          :key="item.GROUP_ID"
          :value="item"
          :label="item.GROUP_NAME"
        ></el-option>
      </el-select>
    </div>
    <template #footer>
      <span>
        <el-button type="primary" style="width: 40%" @click="cancelSave"
          >取消</el-button
        >
        <el-button type="primary" style="width: 40%" @click="confirmSave"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template> 
<style lang="scss" scoped>
$color_1: #2b2b2b;
$font-family_1: PingFangSC-Medium;
.el-dialog__wrapper.copy-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  ::v-deep {
    .el-dialog {
      margin: 0 !important;
      font-family: $font-family_1;
      font-size: 20px;
      color: $color_1;
      letter-spacing: 0;
      text-align: center;
      width: 484px;
      border-radius: 10px;
      .el-dialog__header {
        padding: 20px;
      }
      .el-dialog__body {
        padding: 20px;
      }
      .el-dialog__title {
        font-size: 24px;
      }
      .el-dialog__footer {
        text-align: center;
      }
    }
  }
}
</style>